<template>
  <div ref="container" class="FlowContainer" style="height: 500px"></div>
</template>

<script setup name="YTopoEditor">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Control, Menu, DndPanel, SelectionSelect } from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";

const { proxy } = getCurrentInstance();

// 声明容器的对应ref对象和LF对象
const container = ref();
const lf = ref();

const data = reactive({
  // 节点
  nodes: [
    {
      id: 50,
      type: "rect",
      x: 100,
      y: 150,
      text: "你好",
    },
    {
      id: 21,
      type: "circle",
      x: 300,
      y: 150,
    },
  ],
  // 边
  edges: [
    {
      type: "polyline",
      sourceNodeId: 50,
      targetNodeId: 21,
    },
  ],
});

onMounted(() => {
  // 渲染画布
  lf.value = new LogicFlow({
    container: container.value,
    plugins: [DndPanel, Control, Menu, SelectionSelect],
  });
  lf.value.render(data);
});
</script>
